<Html>
    <head>
        <title>定义 并 使用模块</title>
    </head>
    <body>
        <script>
              /*
                        二、如何定义模块

                                1、在 store 文件夹下新建 modules 文件夹， 并在下面新建 moduleA.js  和  moduleB.js 文件用来存放 vuex 的 modules (模块)

                                         项目结构如下：

                                                ├── components             # 组件文件夹
                                                    └── myButton 
                                                        └── myButton.vue   # myButton组件
                                                ├── pages
                                                    └── index 
                                                         └── index.vue      # index页面
                                                ├── static
                                                ├── store
                                                    ├── index.js          # 我们组装模块并导出 store 的地方
                                                    └── modules           # 模块文件夹
                                                        ├── moduleA.js    # 模块moduleA
                                                        └── moduleB.js    # 模块moduleB
                                                ├── App.vue
                                                ├── main.js
                                                ├── manifest.json
                                                ├── pages.json
                                                └── uni.scss

                                
                                2、在 main.js 文件中引入 store

                                            // 页面路径：  main.js

                                            import Vue from 'vue'
                                            import APp from './App'
                                            import store from './store'

                                            Vue.prototype.$store = store;

                                            // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
                                            const app = new Vue({
                                                store,
                                                ..App
                                            })
                                            app.$mount()



                                3、在项目根目录下，新建 store 文件夹，并在下面新建 index.js 文件，作为模块入口，引入各子模块。

                                            //  页面路径： store/index.js
                                            import Vue from 'vue'
                                            import Vuex from 'vuex'

                                            import moduleA from '@/store/modules/moduleA'
                                            import moduleB from '@/store/modules/moduleB'

                                            Vue.use(Vuex)

                                            export default new Vuex.Store({
                                                modules:{
                                                    moduleA,moduleB
                                                }
                                            })


                                4、子模块  moduleA 页面内容。

                                            // 子模块 moduleA 路径：  store/modules/moduleA.js

                                            export default{
                                                state:{
                                                    text:"我是 moduleA 模块下 state.text 的值"
                                                },
                                                getters:{
                                                
                                                },
                                                mutations:{
                                                
                                                },
                                                actions:{
                                                
                                                }
                                            }

                                5、子模块 moduleB  页面内容

                                            // 子模块 moduleB  路径：  store/modules/moduleB.js

                                            export default{
                                                state:{
                                                    timestamp: 1608820295  // 初始时间戳
                                                },
                                                getters:{
                                                    timeString(state){//时间戳转换后的时间
                                                        var date = new Date(state.timestamp);
                                                        var year = date.getFullYear();
                                                        var mon  = date.getMonth()+1;
                                                        var day  = date.getDate();
                                                        var hours = date.getHours();
                                                        var minu = date.getMinutes();
                                                        var sec = date.getSeconds();
                                                        var trMon = mon<10 ? '0'+mon : mon
                                                        var trDay = day<10 ? '0'+day : day
                                                        return year+'-'+trMon+'-'+trDay+" "+hours+":"+minu+":"+sec;
                                                    }
                                                },
                                                mutations:{
                                                    updateTime(state){
                                                        state.timestamp = Date.now();
                                                    }
                                                },
                                                actions:{
                                                
                                                }
                                            }


                                6、在页面中引用组件 myButton ，并通过 mapState 读取 state 中的初始数据。

                                            <!-- 页面路径：pages/index/index.vue --
                                            <template>
                                                <view class="content">
                                                    <view>{{text}}</view>
                                                    <view>时间戳：{{timestamp}}</view>
                                                    <view>当前时间:{{timeString}}</view>
                                                    <myButton></myButton>
                                                </view>
                                            </template>
                                            <script>
                                                import {mapState,mapGetters} from 'vuex' 
                                                export default {
                                                    computed: {
                                                        ...mapState({
                                                            text: state => state.moduleA.text,
                                                            timestamp: state => state.moduleB.timestamp
                                                        }),
                                                        ...mapGetters([
                                                            'timeString'
                                                        ])
                                                    }
                                                }
                                            </、script>


                                7、在组件 myButton中，通过 mutations 操作刷新当前时间。
                                            
                                            !-- 组件路径：components/myButton/myButton.vue --    

                                            <template>
                                                <view>
                                                    <button type="default" @click="updateTime">刷新当前时间</button>
                                                </view>
                                            </template>
                                            <script>
                                                import {mapMutations} from 'vuex'
                                                export default {
                                                    data() {
                                                        return {}
                                                    },
                                                    methods: {
                                                        ...mapMutations(['updateTime'])
                                                    }
                                                }
                                            </、script>


                            vue是单向数据流，子组件不能直接修改父组件的数据，而通过vuex状态管理实现：把组件的共享状态抽取出来，以一个全局单例模式管理。
                            
                            在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
                    */
        </script>
    </body>
</Html>